<form id="edit-form" class="layui-form" lay-filter="edit-form" onsubmit="return false;">
    <input type="hidden" name="id" value="#(bean.id??)">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-form-item layui-block">
                <label class="layui-form-label">上级部门</label>
                <div class="layui-input-block">
                    <div id="parent" name="parentId" data-id="0" value="#(bean.parentId??)"></div>
                </div>
            </div>
            <div class="layui-form-item layui-block">
                <label class="layui-form-label required">部门名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" value="#(bean.name??)" lay-verify="required" autocomplete="off" placeholder="请输入名称" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-block">
                <label class="layui-form-label required">排序</label>
                <div class="layui-input-inline">
                    <input type="text" name="sort" lay-verify="required|number" autocomplete="off" placeholder="小到大排列" class="layui-input" value="#(bean.sort??)">
                </div>
                <label class="layui-form-label required">状态</label>
                <div class="layui-input-inline">
                    <input type="radio" name="status" value="ON" title="启用" #if(bean.status?? == 'ON' || bean.status?? == null) checked #end>
                    <input type="radio" name="status" value="OFF" title="禁用" #if(bean.status?? == 'OFF') checked #end>
                </div>
            </div>
            <div class="layui-form-item layui-block">
                <label class="layui-form-label">负责人</label>
                <div class="layui-input-block">
                    <input type="text" name="leader" placeholder="负责人名称" autocomplete="off" class="layui-input" value="#(bean.leader??)">
                </div>
            </div>
            <div class="layui-form-item layui-block">
                <label class="layui-form-label">联系电话</label>
                <div class="layui-input-block">
                    <input type="text" name="phone" placeholder="负责人联系电话" autocomplete="off" class="layui-input" value="#(bean.phone??)">
                </div>
            </div>
            <div class="layui-form-item layui-block">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-block">
                    <input type="text" name="email" placeholder="负责人邮箱地址" autocomplete="off" class="layui-input" value="#(bean.email??)">
                </div>
            </div>
        </div>
    </div>
    <div class="layui-form-item layui-block" style="display: none;">
        <div class="layui-input-block">
            <button id="submit-button" type="submit" class="layui-btn layui-btn-sm" lay-submit lay-filter="submit-button">
                <i class="layui-icon layui-icon-ok"></i> 提交
            </button>
        </div>
    </div>
</form>
#include("/admin/_common/foot.html")
<script type="text/javascript">
layui.use(['jquery', 'form', 'xmSelect'], function() {
    var $ = layui.jquery, xmSelect = layui.xmSelect;

    /*
     * 初始化部门树
     */
    window.initDeptTree = () => {
        xmSelect.render({
            el: "#parent",                              //树绑定的元素ID
            name: 'parentId',
            filterable: true,                           //是否开启搜索
            radio: true,                                //单选模式
            prop: {                                     //自定义属性
                name: 'title',
                value: 'id',
            },
            tree: {
                show: true,
                showFolderIcon: true,                   //是否展示三角图标
                showLine: false,                        //是否显示虚线
                indent: 20,                             //树状虚线距离
                expandedKeys: true,                     //展开所有节点
                strict: false,                          //勾选父类是否全选下级
                clickExpand: false,                     //点击节点是否展开
                clickCheck: true,                       //点击节点是否选中
            },
            prop: {                                     //自定义属性
                value: 'id',                            //value的值为data中的id值
                name: 'name',
                selected: 'selected',
                disabled: 'disabled',
                children: 'children',
            },
            toolbar: {show: false, list: ['CLEAR']},    //开启工具条
            initValue: ["#(bean.parentId??)"],          //初始化选择
            clickClose: true,                           //是否点击选项后自动关闭下拉框
            data: getDeptTreeData()
        });
    }

    /*
     * 从后台获取部门树数据
     */
    window.getDeptTreeData = () => {
        var data = [];
        $.ajax({
            url: "#CTX()/admin/system/dept/tree",       //后台数据请求地址
            async: false,
            success: function(result){
                data = result;
            }
        });
        return data;
    };

    /*
     * 页面加载完成时加载数据
     */
    $(document).ready(() => {
        initDeptTree();
    });
});
</script>
